<template>
	<view class="content">
		<view class="hb">
			<ul class="flex">
				<li  v-for="(item,index) in hb_list" :key="index" @click="change(index)" :class="{'active':isActive==index}"> 
					{{item.title}}
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive:0,
				index:0,
				currentId:'',
				hb_list:[
					{id:'1',title:'未使用'},
					{id:'2',title:'已使用'}
				]
			}
		},
		methods:{
			change:function(index){
				//console.log(index)
				this.isActive = index;
			}
		}
	}
</script>

<style lang="scss">
	.active{border-bottom: 5rpx solid red;}
	.hb ul {width: 90%;margin: 0 auto;text-align: center;height: 80rpx;line-height: 80rpx;}
	.hb ul li {width: 40%;}
	.flex{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
</style>